<template>
  <div>


    <div class="headerList clearfix" v-show="headerVisible">
       <ul>
             <li v-for="(item,index) in items" v-on:click="changeState(index)"><div class="headerItem"  v-bind:class="{'selectHeader':item.isSelected}"><router-link :to='item.routes' ><div style="width:100%;height:40px;line-height:40px">{{item.title}} </div></router-link></div></li> 

       </ul>
   </div> 

      <Modal v-show="true" :closable="false" title="请输入操作码" v-model="isAuth" >
          <input type="text" v-model="userCode"  placeholder="请输入操作码"></input>

            <div slot="footer">
                  <Button type="ghost" size="large" class="pinkButton"  v-on:click="checkAuth">确认</Button>
              </div>
      </Modal>
  </div>
</template>

<script>
import Store from '../store'
import vuex_store from '../js/vuex-store'
import api from '../js/axios-module'

export default {
  name:"header",
  data:function() {
    return {
      userCode:"",
      isAuth:false,
      headerVisible:true,
      currentRoute: "",
       isSelected:["/BaseMessage","/IVFFollowing","/PhysicalExamination","/OvulationInduction","/EmbryosInduction","/FreezingStorage","/EmbryoMove","/Ingravidation"],
      items:[
          {
            title:"客户基础信息",
            routes:"/BaseMessage",
            isSelected:false
          },
          {
            title:"IVF顾问服务",
            routes:"/IVFFollowing",
            isSelected:false
          },
          {
              title:"身体检查",
            routes:"/PhysicalExamination",
            isSelected:false
          },
          {
              title:"促排卵",
            routes:"/OvulationInduction",
            isSelected:false
          },
          {
              title:"胚胎受精",
            routes:"/EmbryosInduction",
            isSelected:false
          },
          {
              title:"冷冻储存",
            routes:"/FreezingStorage",
            isSelected:false
          },
          {
              title:"胚胎移植",
            routes:"/EmbryoMove",
            isSelected:false
          },
          {
              title:"受孕情况",
            routes:"/Ingravidation",
            isSelected:false
          }


      ]
    }
  },
  created: function () {
      
      var key = Store.fetch(Store.CURRENTROUTE_KEY);
   

      for (var i = this.isSelected.length - 1; i >= 0; i--) {

          if (key == this.isSelected[i-1]) {

            this.changeState(i-1);
          }
      }     
  },
  store:vuex_store, 
  props:[""],
  methods:{
    //检验验证码
    checkAuth(){

      if (this.userCode == "") {
        this.$Message.error("请输入操作码")
        return;
      } 

      api.getAuth({"password":this.userCode}).then(response => {
          //校验成功以后
          // console.log(response.data)
        this.isAuth = false
        this.$store.commit("setAuth",response.data.data);

      },err=>{

      })


      

    },
    //这里只是刷新路由页面的状态
    changeState(number){

          for (var i = this.items.length - 1; i >= 0; i--) {
            this.items[i].isSelected = false;

          }
         this.items[number].isSelected =true;   



    }
  },watch:{
    "$route":{
      handler:function(route){

        if (route.path!="/IVFFollowing"&&route.path!="/BaseMessage") {

              // console.log(this.$store.getters.getAuth)

              if (this.$store.getters.getAuth == "") {

                  // console.log("没有验证操作码")
                  this.isAuth = true
                  
              } else {
                  this.isAuth = false

                  // this.$store.commit("setAuth",'');
                  
                  // console.log("有操作码")
              }

              
        }
          
         Store.save(route.path,Store.CURRENTROUTE_KEY);


      },
      deep:true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.headerList li{
       float: left;
       width: 25%;
       background-color: rgb(173,173,173);

  }
.headerItem{
     font-size: 12px;
     color: white;
     /*background-color: rgb(173,173,173);*/
     text-align: center;
     vertical-align: middle;
     padding: 0px 0px;
     border: 1px white solid;
     height: 40px;

}
.headerItem a{
  color: white;
}
.selectHeader{
  background-color: rgb(209,68,100);
}
</style>
